import Controller from '../../component/Controller';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { theme } from '../../theme';
import IconBackWhite from '../../asserts/back_light.svg'
import Header from './Header';
import TeamContent from './Content'
import IconBg from '../../asserts/icon_bg.webp'
import { isIOS } from '../../utils/check';

const Box = styled(Controller)`
    background-color: ${(prop) => prop.theme.background.normal};
    .content {
        height: 100%;
        overflow: hidden;
    }
`

const Content = styled.div`    
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
    
`

const InnerContent = styled(TeamContent)`
    flex: 1;
    overflow: visible;
    min-height: 0;
`
const Team: React.FC = () => {
    const { t } = useTranslation()

    return <Box
        navigation={{
            title: t('team.title'),
            titleStyle: {
                color: theme.text.normal
            },
            backIcon: IconBackWhite,
        }}
        contentClassName='content'
        imagebackground={{
            image: IconBg,
            style: isIOS() ? {} : { position: 'fixed' } // TODO: why absolute will case some gesture problem in andriod
        }}
        hiddenSafeBottom={true}
    >
        <Content>
            <Header />
            <InnerContent />
        </Content>
    </Box>
}

export default Team